<template>
    <div class="layout">
        <div class="main-box">
            <div class="searcher-box">
                <Searcher :searcherType="2" :costQuery="pageData.costQuery" @getList="getList" />
            </div>
            <div class="table-box" v-loading="costLoading">
                <el-table
                    ref="singleTableRef"
                    :cell-style="{background: 'var(--el-table-tr-bg-color)'}"
                    :data="tableData"
                    style="width: 100%" border>
                    <el-table-column width="55" fixed>
                        <template #default="{ row }">
                            <el-radio
                                class="radio"
                                :label="row"
                                v-model="currentRow">
                                &emsp;&emsp;&emsp;
                            </el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column type="index" width="55" fixed/>
                    <el-table-column prop="supplierName" label="&nbsp&nbsp&nbsp供应商名称" width="240" fixed>
                        <template #default="{ row }">
                            <el-button type="primary" text @click="handleComponent('view', row)">
                                <span>{{ row.supplierName }}</span>
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="product_name" label="采购业务"  width="180" />
                    <el-table-column label="订单处理成本（元）" prop="orderProcessingCost" width="180" />
                    <el-table-column prop="transportationFee" label="运输费（元）"  width="180" />
                    <el-table-column prop="insuranceFee" label="保险费（元）"  width="180" />
                    <el-table-column prop="telephoneFee" label="通讯费（元）"  width="180" />
                    <el-table-column prop="inspectionFee" label="检验费（元）"  width="180" />
                    <el-table-column prop="loadingAndUnloadingFee" label="装卸费（元）"  width="180" />
                    <el-table-column prop="otherFee" label="其他（元）"  width="180" />
                    <el-table-column prop="totalFee" label="合计（元）"  width="180" fixed="right" />
                </el-table>
            </div>
            <div style="margin: 20px">
                <el-button type="primary" @click="handleComponent('addCost')">添加订单成本表</el-button>
                <el-button type="primary" @click="handleComponent('editCost')">编辑成本表</el-button>
                <el-button type="primary" @click="handleComponent('viewCost')">查看成本表</el-button>
                <el-button type="info" @click="handleComponent('delCost')">删除成本表</el-button>
            </div>
            <Edit :query="formQuery" :dialogVisible="dialogEditVisible" @updateData="updateData" :getList="getList"/>
            <costEdit :query="formQuery" :dialogVisible="dialogCostEditVisible" @updateData="updateData" :getList="getList"/>
            <div class="pagination-box">
                <Pagination :background="true" :currentPage="pageData.query.pageNo" :pageSize="pageData.query.pageSize" :total="total" @getList="getList" />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, onMounted, reactive, toRefs, computed } from 'vue'
import { costPage, costDelete } from "./service/api"
import Searcher from './components/searcher.vue'
import Pagination from './components/pagination.vue'
import Edit from './components/supplierEdit.vue'
import costEdit from './components/costEdit.vue'
import Details from './components/details.vue'
import pageData from './service/pageService'
import { ElMessage } from 'element-plus'
export default defineComponent({
    components: {
        Searcher,
        Pagination,
        Edit,
        Details,
        costEdit
    },
    setup() {
      const state = reactive({
        costLoading: false,
        total: null,
        tableData:[
            // {
            //     id:1,
            //     supplierName: "XXX有限公司",
            //     productName: "氧化铝铜板",
            //     orderProcessingCost: 53,
            //     transportationFee: 0,
            //     insuranceFee: 0,
            //     telephoneFee: 2,
            //     inspectionFee: 20,
            //     loadingAndUnloadingFee: 20,
            //     otherFee: 0,
            //     totalFee: 125,
            // },
            // {
            //     id:2,
            //     supplierName: "XXX有限公司",
            //     productName: "氧化铝铜板",
            //     orderProcessingCost: 53,
            //     transportationFee: 0,
            //     insuranceFee: 0,
            //     telephoneFee: 2,
            //     inspectionFee: 20,
            //     loadingAndUnloadingFee: 20,
            //     otherFee: 0,
            //     totalFee: 125,
            // }
        ],
        currentRow:null,
        dialogEditVisible:false,
        dialogViewVisible:false,
        dialogCostEditVisible:false,
        formQuery:null,
      })
      const getList = (val) => {
        console.log("父组件",val)
        if(val?.pagesize) {
            pageData.costQuery.pageSize = val.pagesize
        }
        if(val?.currentpage) {
            pageData.costQuery.pageNo = val.currentpage
        }
        costPage(pageData.costQuery).then((response)=>{
            state.tableData = response.data.data.tableData
            state.total = response.data.data.total
            console.log("Response:", response)
            state.costLoading = false
        })
      }
      // 函数：将百分制评分转换为五星级评分
      const getNormalizedScore = (score) => {
          console.log(score)
        return (score / 20).toFixed(1); // 转换为五星级评分，保留一位小数
      };
      const handleComponent = (val,row=state.currentRow) => {
        if(val == "editCost")
        {
            console.log('row',row)
            if(!state.currentRow){
                ElMessage({
                    message: '请选择需要被编辑的数据行',
                    type: 'warning',
                })
            }
            else{
                const data = {
                    type:val,
                    title:"编辑成本信息",
                    id:row.id
                }
                state.formQuery = data
                state.dialogCostEditVisible = true
            }
            console.log("state.currentRow",state.currentRow)
        }else if(val == "view")
        {
            const data = {
                type:val,
                title:"详情",
                id:row.supplierId
            }
            state.formQuery = data
            state.dialogEditVisible = true
        }else if(val == "viewCost")
        {
            if(!state.currentRow){
                ElMessage({
                    message: '请选择需要被查看订货成本单的数据行',
                    type: 'warning',
                })
            }else{
                const data = {
                    type:val,
                    title:"订货成本详情",
                    id:row.id
                }
                state.formQuery = data
                state.dialogCostEditVisible = true
            }
        }else if(val == "addCost")
        {
            const data = {
                type:val,
                title:"订货成本表单"
            }
            state.formQuery = data
            state.dialogCostEditVisible = true
        }else if(val == "delCost")
        {
            if(!state.currentRow){
                ElMessage({
                    message: '请选择需要被删除的数据行',
                    type: 'warning',
                })
            }
            else{
                const data = {
                    id:row.id
                }
                costDelete(data).then((res)=>{
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                    getList()
                })
            }
        }
      }
      const updateData = (val) =>{
        state.dialogEditVisible = val
        state.dialogCostEditVisible = val
        console.log("state.dialogVisible ",state.dialogEditVisible )
      }
      onBeforeMount(() => {
          state.costLoading = true
          getList()
      })
      return {
        ...toRefs(state),
        getList,
        handleComponent,
        pageData,
        updateData,
        getNormalizedScore,
      }
    }
})
</script>

<style  scoped>
.layout{
    width: 100%;
    height: 100%;
    background-color: #F5F6F9;
    padding-top: 20px;
}
.main-box{
    width: 98%;
    height: 100%;
    background-color: #FFFFFF;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.searcher-box{
    margin-top: 20px;
    height: 100px;
    width: 96%;
    margin-left: auto;
    margin-right: auto;
}
.table-box{
    height: 80%;
    width: 96%;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    overflow: auto; /* 添加滚动条 */
}
.pagination-box{
    height: 100px;
    width: 100%;
    background-color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
}

.el-table {
    --el-table-header-bg-color: var(--el-bg-color-page);
    --el-table-border-color: var(--el-border-color-dark);
    --el-table-header-text-color: var(--el-text-color-primary);
}
:deep(.el-table .hovering-row) {
  --el-table-tr-bg-color: #f5f7fa;
}

</style>